<template>
	<view class="t-u-box">
		<view class="t-top">
			<image class="t-bg" src="https://img.jinghushi.com/images/9/2025/10/o2Gq5hmqfOfkg05iIfUTf2OHu2GQhg.png">
			</image>
			<view class="t-info">
				<view class="l1">米券余额：</view>
				<view class="l2">
					<image class="laoding" v-if="sholoading" src="/static/loading.gif"></image>
					<text v-else>{{topup.micredit||''}}</text>
				</view>
				<view class="l3" @click="$navTo('/pages/order/detailtopup')">
					<text class="name">充值明细</text>
					<image class="more" src="/pages/set/static/yinka/sjiantou.png"></image>
				</view>
			</view>

		</view>
		<view class="t-body">
			<!-- 分隔线 -->
			<view class="f-g-b">
				<image class="f-g"
					src="https://img.jinghushi.com/images/9/2025/10/gEm4KhahAKPAg4hCP3j4akzjeEeZ7K.png" />
			</view>
			<view class="b-c">
				<view class="c-c">
					<view class="t">请输入充值金额</view>
					<view class="v">
						<text class="icon">￥</text>
						<input type="digit" v-model="body.money" placeholder="请输入金额（最多两位小数）" placeholder-class="m-p"
							@input="handleMoneyInput" />
					</view>
					<view class="t t1">请选择充值方式</view>
					<view class="type">
						<view class="left" @click="body.type=2">
							<image class="icon" src="/static/user/zhifubao.png"></image>
							<text>支付宝充值</text>
						</view>
						<radio class="radio" value="" color="#9A1FE8" :checked="body.type==2" />
					</view>
					<view class="t t1">米券充值功能使用说明</view>
					<view class="jyf-parser" v-if="sholoading">
						<image class="laoding" src="/static/loading.gif"></image>
					</view>
					<jyf-parser class="jyf-parser" v-else :html="topup.statement" :selectable="true"></jyf-parser>
				</view>
			</view>
		</view>
		<view class="btn-b">
			<view class="bbtn" @tap="goPay">立即充值</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topup: {}, //页面信息
				sholoading: false,
				body: {
					type: 2,
					money: '',
					apptype: ''
				}, //充值参数
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				this.getInfo()
			},
			async getInfo() {
				this.sholoading = true
				const res = await this.$axios('User/getStatement', 'POST', 'pt')
				this.sholoading = false
				if (res.data.code == 200) {
					this.topup = res.data.data || {}
				}
			},
			async goPay() {
				if (!this.body.money || this.body.money < 1) {
					this.$api.msg('请正确填写充值金额')
					return
				}
				const r = await uni.showModal({
					title: `充值提醒`,
					content:`确定充值${this.body.money}`
				})
				if (r.cancel) {
					return
				}
				// #ifdef H5
				this.body.apptype = 1
				// #endif
				// #ifdef APP
				this.body.apptype = 2
				// #endif
				// #ifdef MP
				this.body.apptype = 3
				// #endif
				const body = {
					...this.body
				}
				this.body.money = ''
				uni.showLoading({
					title: '充值中'
				})
				const res = await this.$axios('Pay/recharge', 'POST', 'pt', body, 1)
				uni.hideLoading()
				if (res.data.code == 200) {
					window.location.href = 'https://pintuan.jinghushi.com/pay.htm?goto=' + res.data.data
				} else {
					uni.showModal({
						title: '温馨提示',
						content: res.data.data
					})
				}
			},
			handleMoneyInput() {
				let value = this.body.money;
				// 1. 过滤非法字符：只保留数字和一个小数点
				value = value.replace(/[^\d.]/g, '');
				// 2. 限制只能有一个小数点
				value = value.replace(/\.{2,}/g, '.');
				// 3. 确保小数点后只有两位
				value = value.replace(/(\.\d{2})\d+/g, '$1');
				// 4. 处理开头为 0 的情况（如 00123 转为 123，0.12 保留）
				value = value.replace(/^0+(\d)/, '$1');
				// 5. 处理小数点开头（如 .12 转为 0.12）
				value = value.replace(/^\./, '0.');
				// 6. 更新绑定的值
				setTimeout(() => {
					this.body.money = value;
				}, 0)
			}
		}
	}
</script>

<style scoped lang="scss">
	.t-u-box {
		background-color: #FDF8FF;
		min-height: calc(100vh - var(--window-bottom));
		font-family: Microsoft YaHei;
		font-variation-settings: "opsz" auto;

		.t-top {
			background: url(https://img.jinghushi.com/images/9/2025/10/RuMZeXjmvjD22G26yVB76ugvUQUB1U.png) no-repeat 0 0;
			background-size: 100% 100%;
			padding: 20rpx 0;
			height: 300rpx;
			position: relative;

			.t-bg {
				position: absolute;
				top: 20rpx;
				width: 694rpx;
				left: 28rpx;
				height: 260rpx;
			}

			.t-info {
				position: relative;
				padding: 24rpx 28rpx;
				margin: 0 28rpx;
				width: 694rpx;
				z-index: 1;

				.l1 {
					padding-top: 10rpx;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.l2 {
					font-size: 44rpx;
					font-weight: bold;
					padding-top: 8rpx;
					color: #FFFFFF;

					.laoding {
						height: 30rpx;
						width: 30rpx;
					}
				}

				.l3 {
					padding-top: 34rpx;
					display: flex;
					align-items: center;

					.name {
						color: #FFFFFF;
						font-size: 24rpx;
					}

					.more {
						margin-left: 14rpx;
						width: calc(56rpx * 0.5);
						height: calc(48rpx * 0.5);
					}
				}
			}
		}

		.t-body {
			position: relative;
			bottom: 70rpx;
			z-index: 1;

			.f-g-b {
				position: relative;
				height: calc(100vw * 64 / 1500);

				.f-g {
					position: absolute;
					top: 0;
					left: 0;
					height: calc(100vw * 64 / 1500);
					width: 100%;
					z-index: 1;
				}
			}

			.b-c {
				background: #FDF8FF;

				.c-c {
					background: #FFFFFF;
					border-radius: 16rpx;
					width: 690rpx;
					margin: 0 auto;
					padding: 20rpx 32rpx;

					.t {
						color: #13001E;
						font-size: 28rpx;
						font-weight: bold;
						padding-left: 20rpx;
						position: relative;

						&:before {
							content: '';
							width: 8rpx;
							height: 20rpx;
							background: #9A1FE8;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							border-radius: 10rpx;
							box-shadow: 0px 0px 2rpx 2rpx rgba(81, 0, 132, 0.1);
						}
					}

					.v {
						display: flex;
						align-items: center;
						padding: 14rpx 0 10rpx;
						border-bottom: 2rpx solid rgba(153, 153, 153, 0.15);

						.icon {
							color: #13001E;
							font-size: 48rpx;
							font-weight: bold;
							position: relative;
							line-height: 70rpx;
						}

						input {
							flex: 1;
							font-size: 40rpx;
							height: 90rpx;
						}

						.m-p {
							font-size: 36rpx;
						}
					}

					.t1 {
						margin-top: 48rpx;
					}

					.type {
						padding: 32rpx 0;
						display: flex;
						align-items: center;

						.left {
							flex: 1;
							display: flex;
							align-items: center;

							.icon {
								width: 48rpx;
								height: 48rpx;
								margin-right: 24rpx;
							}
						}

						.radio {
							transform: scale(0.7);
						}
					}

					.jyf-parser {
						padding-top: 20rpx;
						min-height: 300rpx;

						.laoding {
							width: 50rpx;
							height: 50rpx;
						}
					}
				}
			}
		}

		.btn-b {
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 164rpx;
			background: #FFFFFF;
			box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			align-items: center;
		}

	}
</style>